<template>
  <d2-container>
    <div class="d2-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>运营配置</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <h2>园区招商分佣比例</h2>
    <el-form
      label-width="100px"
      :model="query"
      :rules="rules"
      ref="add"
      label-position="top"
    >
      <el-form-item label="园区分佣比例" prop="gardenScale" :rules="[
      { required: true, message: '字段不能为空'}
    ]">
        <el-input
          type="text"
          v-model.trim="query.gardenScale"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="带看经纪人分佣比例" prop="lookAgentScale" :rules="[
      { required: true, message: '字段不能为空'}
    ]">
        <el-input
          type="text"
          v-model.trim="query.lookAgentScale"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item label="房产经纪人分佣比例" prop="assessAgentScale" :rules="[
      { required: true, message: '字段不能为空'}
    ]">
        <el-input
          type="text"
          v-model.trim="query.assessAgentScale"
          style="width: 80%"
        ></el-input>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="update">保存</el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      query: {},
      rules:{}
    };
  },
  methods: {
    getInfo() {
      let userId=localStorage.getItem("userId");
      this.$axios.post("/sysCommissionScale/getInfo", { userId }).then((result) => {
        console.log("响应", result);
        if (result.data) {
          this.query = result.data;
        } else {
          this.$message.error(result.data.msg);
        }
      });
    },
    update() {
      this.$refs["add"].validate((valid) => {
        if (valid) {
          let params = {
            ...this.query,
          };
          console.log("提交内容：", params);
          this.$axios.post("/sysCommissionScale/update", params).then((result) => {
            console.log("响应", result);
            if (result.code == 200) {
              this.$message.success("操作成功");
            } else {
              this.$message.error(result.data.msg);
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  created() {
    this.getInfo();
  },
};
</script>

<style scoped lang="scss">
.num-block {
  text-align: center;
  background: #f3f3f3;
  border-radius: 2px;
  margin-bottom: 25px;
  color: #666;
  .el-col {
    font-size: 20px;
    .grid-content {
      border-left: 1px dashed #c1c1c1;
      position: relative;
      .position-box {
        position: absolute;
        right: 30px;
      }
    }
    &:nth-of-type(1) {
      color: #409eff;
      .grid-content {
        border-left: 0;
      }
    }
    &:nth-of-type(2) {
      color: #67c23a;
    }
    &:nth-of-type(3) {
      color: #909399;
    }
    &:nth-of-type(4) {
      color: #f56c6c;
    }
  }
}
.title {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #dce2eb;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
}
</style>
